import 'ol/ol.css'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import Polygon from 'ol/geom/Polygon'
import { Style, Fill, Text, Icon } from 'ol/style'
import Stroke from 'ol/style/Stroke'
import Circle from 'ol/style/Circle'
import { LineString } from 'ol/geom'

// 画点
export function getAreaFeature(color, nameColor, name, coodinate, count) {
  var gisArr = coodinate.split(';')

  for (let i = 0; i < gisArr.length; i++) {
    gisArr[i] = gisArr[i].split(',')
  }

  var feature = new Feature({
    type: 'polygon',
    name: name, // 显示名称
    count: 1,
    geometry: new Polygon([gisArr])
  })
  feature.setStyle(getStyle(color, nameColor, name))
  return feature
}

// 画线
export function getLineFeature(color, nameColor, name, coordinate, width) {
  if (width === undefined) {
    width = 3
  }
  // 将坐标字符串转换为坐标数组
  const gisArr = coordinate.split(';').map(coord => {
    return coord.split(',').map(Number) // 转换为数字数组
  })

  // 创建线条 Feature
  const feature = new Feature({
    type: 'line', // 自定义属性，可用于区分类型
    name: name, // 线条名称
    geometry: new LineString(gisArr) // 创建 LineString 几何对象
  })

  var arrow = new LineString(gisArr)
  // 设置线条样式
  feature.setStyle([ // 线条样式
    getLineStyle(color, nameColor, name, width)
  ])
  return feature
}
function getArrow(geometry) {
  const styles = [
    // linestring
    new Style({
      stroke: new Stroke({
        color: '#ffcc33',
        width: 2
      })
      // image: new Icon({
      //   src: '/img/map/green.png',
      //   anchor: [0.75, 0.5],
      //   rotateWithView: true
      //   // rotation: -rotation
      // })
    })
  ]

  geometry.forEachSegment(function(start, end) {
    const dx = end[0] - start[0]
    const dy = end[1] - start[1]
    const rotation = Math.atan2(dy, dx)
    // arrows
    styles.push(
      new Style({
        geometry: new Point(end)
        // image: new Icon({
        //   src: '/img/map/green.png',
        //   anchor: [0.75, 0.5],
        //   rotateWithView: true,
        //   rotation: -rotation
        // })
      }),
    )
  })

  return styles
}
// 线条样式函数
function getLineStyle(color, nameColor, name, width) {
  return new Style({
    // image: new Icon({
    //   src: '/img/map/green.png',
    //   anchor: [0.5, 0.9],
    //   scale: 0.2
    // }),
    image: new Circle({
      radius: 8,
      fill: new Fill({
        color: 'red'
      })
    }),
    text: new Text({
      font: 'bold 12px sans-serif',
      text: name, // 显示名称
      offsetY: 12,
      fill: new Fill({ color: nameColor })
    }),
    stroke: new Stroke({
      color: color || '#00ff00', // 默认线条颜色
      width: parseInt(width) // 线条宽度
    })
  })
}
// 画图形
export function getPointFeature(color, nameColor, name, coodinate, count) {
  const point = new Feature({
    type: 'risk',
    name: name, // 显示名称
    count: count,
    geometry: new Point(coodinate.split(','))
  })
  point.setStyle(new Style({
    text: new Text({
      font: 'bold 12px sans-serif',
      text: name, // 显示名称
      offsetY: 12,
      fill: new Fill({ color: nameColor })
    }),
    image: new Circle({
      radius: 5,
      fill: new Fill({
        color: color
      })
    })
  }))
  return point
}

// 画图形
export function getRiskPointFeature(id, level, name, points) {
  var color = '#0000ff'
  if (level === '一般风险') {
    color = '#f4ea2a'
  } else if (level === '较大风险') {
    color = '#ff6600'
  } else if (level === '重大风险') {
    color = '#d81e06'
  }
  const point = new Feature({
    type: 'riskPoint',
    name: name, // 显示名称
    id: id, // 显示名称
    count: '<span style="color: ' + color + '">' + level + '</span>',
    geometry: new Point(points)
  })
  point.setStyle(new Style({
    image: new Icon({
      src: '/static/img/' + level + '.png',
      anchor: [0.5, 0.9], // 图标定位，0.5为中间，[左右，上下]
      scale: 1 // 图标大小
    })
  }))
  return point
}

// 获得白色点标注
export function getWhitePoint(el, type, name) {
  const point = new Feature({
    type: type,
    data: el,
    geometry: new Point([el.gisX, el.gisY])
  })
  point.setStyle(new Style({
    image: new Icon({
      src: '/img/map/green.png',
      anchor: [0.5, 0.9],
      scale: 0.2
    }),
    text: new Text({
      font: 'bold 12px sans-serif',
      text: name,
      offsetY: 12,
      fill: new Fill({ color: 'white' }),
      backgroundFill: new Fill({ color: 'rgba(255,255,255,0.1)' })
    })
  }))

  return point
}

// 获取区域样式
export function getStyle(color, nameColor, name) {
  return new Style({
    // 填充
    fill: new Fill({
      color: 'rgba(0,0,0, 0.2)'
    }),
    // 线
    stroke: new Stroke({
      color: color,
      width: 3
    }),
    // 绘制的那个标记
    image: new Circle({
      radius: 5,
      stroke: new Stroke({
        color: 'rgb(212,35,122)'
      }),
      fill: new Fill({
        color: 'rgba(255,255,255,0.6)'
      })
    }),
    text: new Text({
      textAlign: 'center', // 位置
      textBaseline: 'middle', // 基准线
      overflow: true,
      font: 'bold 12px 宋体',
      text: name,
      fill: new Fill({ // 文本填充样式（即文字颜色)
        color: nameColor
      })
    })
  })
}
